<template>
  <el-menu-item style="padding: 0;height: 70px">
    <div id="Friend">
      <div class="box1">
        <el-avatar shape="square" :size="45" :src="this.friend.url==null? '':this.friend.url"></el-avatar>
      </div>
      <!--      消息信息-->
      <div class="box2">
        <!--              消息的时间-->
        <h4 class="boxh5">{{ ProcessingData(info.message) }}</h4>
        <!--              名字-->
        <h4 class="boxh4">{{ this.friend.name == null ? '' : this.friend.name }}</h4>
        <!--   消息内容-->
        <h4 class="boxh6">{{ info.message.length == 0 ? '暂无聊天内容' : Processing(info.message) }}</h4>
      </div>
    </div>
  </el-menu-item>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: "Cli",
  props: {
    info: {}
  },
  //函数
  methods: {
    //处理消息的内容
    Processing(message) {
      if (message[message.length - 1].type == '0') {  //文本类型
        //判断字符串的长度 , 是否大于10
        if (message[message.length - 1].mes.length >= 12) {
          //  截取字符串
          var str = message[message.length - 1].mes.substring(0, 12);
          return str + "...";
        }
        return message[message.length - 1].mes;

      } else if (message[message.length - 1].type == '1') { //图片消息
        return "【图片】";
      } else if (message[message.length - 1].type == '2') { //视频消息
        return "【视频】";
      } else if (message[message.length - 1].type == '3') { //表情消息
        return "【表情】";
      } else {
        return "暂无聊天内容"
      }
    },
    ProcessingData(message) {

      //判断长度是否为0
      if (message.length != 0) {
        //获取时间
        var time = this.formatTime(message[message.length - 1].date);
        return time;
      } else {
        return "...";
      }
    },
    formatTime(time) {
      if (time == null) {
        return "";
      }
      var dat = new Date(parseInt(time));

      // return dat.toLocaleDateString();
      if (new Date().getTime() - dat.getTime() < 86400000) {
        return dat.toLocaleTimeString();
      }
      return dat.toLocaleDateString();
    },
  },
  computed: {
    ...mapGetters(['id', 'friends']),
    //通过账号 , 到用户的朋友列表中 , 查询到用户的信息 , 进行展示
    friend() {
      console.log("info: " + this.info);
      var fri = '';
      console.log(this.info.toid);
      //  判断 , 会话的发起者 , 是否是当前用户 , 如果是当前用户 , 则展示 to , 如果是to , 则展示当前用户
      if (this.info.fromid == this.id) {   //是当前用户
        fri = this.info.toid;
      } else {
        fri = this.info.fromid;            //不是当前用户 , 则展示fromid;
      }
      //  通过id , 到朋友列表中 , 查询到用户的信息 , 进行展示
      for (let i = 0; i < this.friends.length; i++) {
        //  判断 , 用户 , 是否相同 , 如果相同 , 则把用户的信息 , 返回出去
        if (this.friends[i].id == fri) {
          return this.friends[i];
        }
      }
    }
  },
}
</script>

<style scoped>
/*<!-- 时间 -->*/
.boxh5 {
  /*靠右对齐*/
  text-align: right;
  position: relative;
  top: -25px;
  font-size: 13px;
  font-weight: 400;
  color: #b0b0b0
}

/*名字*/
.boxh4 {
  text-align: left;
  position: relative;
  top: -90px;
  font-size: 15px;
  font-weight: 400;
  margin-left: 5px;
  color: #111111;
  font-family: 微软雅黑;
}

#Friend {
  display: flex;
  border-bottom: 1px solid #dcdada;
  height: 69px;
}

#Friend:hover {
  background-color: #c9c6c6;
}

.box1 {
  float: left;
  width: 60px;
  padding-top: 6px;
  padding-left: 5px;

}

.box2 {
  float: left;
  height: 100%;
  width: 167px;
}

/*消息*/
.boxh6 {
  text-align: left;
  position: relative;
  top: -140px;
  padding-left: 20px;
  font-size: 13px;
  font-family: 微软雅黑;
  font-weight: 400;
  color: #b0b0b0
}
</style>
